<!--
 领导批示卡片列表
 @Author: zhanbh
 @Date: 2021-04-20
-->
<template>
    <div class="instruction-cards" :style="gutterStyle.listStyle">
        <instruction-card
                v-for="(item, index) of data"
                :key="index"

                :title="item[dataProps.title]"
                :status="item[dataProps.status]"
                :statusText="item[dataProps.statusText]"
                :content="item[dataProps.content]"

                :style="gutterStyle.itemStyle"

                v-bind="$attrs"
                @click="$emit('click', data)"
        >
            <slot #header name="header" :data="item" :index="index"></slot>
            <slot :data="item" :index="index"></slot>
        </instruction-card>
    </div>
</template>
<script>
    import InstructionCard from './InstructionCard'
    export default {
        name: "InstructionCards",
        components: {
            InstructionCard
        },
        props: {
            data: {
                type: Array,
                default() {
                    return []
                }
            },

            props: Object,  // 数据字段映射

            gutter: {
                type: String,
                default: '0.875rem'
            }
        },
        data() {
            return {};
        },
        computed: {

            // 整合后的字段映射
            dataProps() {
                return Object.assign({
                    title: 'title',
                    status: 'status',
                    statusText: 'statusText',
                    content: 'content'
                }, this.props)
            },

            /**
             * 间隙需要添加的样式
             */
            gutterStyle() {
                let {gutter} = this;
                let result = {
                    listStyle: '',
                    itemStyle: ''
                };

                if (gutter) {
                    result.listStyle = `margin-left: -${gutter};`;
                    result.itemStyle = `margin-left: ${gutter};`;
                }

                return result;
            }
        },
        methods: {},
        created() {
        }
    };
</script>
<style scoped lang="scss">
    .instruction-cards{
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;

        margin-top: -1rem;
    }
    .instruction-card{
        margin-top: 1rem;
    }
</style>
